import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Home() {
    /* 
  navigate方法：
    - 参数1：是to的地址
    - 参数2：配置对象，可以写一个state属性，就是state传参
  
  */
    const navigate=useNavigate();

    const toMusicHandle=()=>{
        navigate('/main/home/music/?user=李四',{
            state:[
                {id:'001',name:'最伟大的作品'},
                {id:'002',name:'青藏高原'},
                {id:'003',name:'天路'},
                {id:'004',name:'听妈妈的话'},
                {id:'005',name:'孤勇者'},
            ]
        })
        // console.log(navigate);
    }
    
    const toNewsHandle=()=>{
        navigate('/main/home/news/?user=李四',{
            state:[
                {id:'001',name:'空间站国旗与地球同框'},
                {id:'002',name:'罗永浩谈钟薛高卖得贵'},
                {id:'003',name:'麦当劳员工将掉地上面包放回货架'},
            ]
        })
    }

  return (
   <div>
    <h3>我是Home的内容</h3>
   <button onClick={toMusicHandle}>Music</button>
   <button onClick={toNewsHandle}>News</button>
   <Outlet/>
   </div>
  )
}
